<template>
  <div class="news-detail-page">
    <!-- 面包屑导航 -->
    <section class="breadcrumb-section">
      <div class="container">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/news' }">新闻动态</el-breadcrumb-item>
          <el-breadcrumb-item>{{ newsData.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </section>

    <!-- 新闻详情内容 -->
    <section class="news-detail-content">
      <div class="container">
        <div class="news-detail-layout">
          <!-- 主要新闻内容 -->
          <div class="news-detail-main">
            <!-- 新闻头部信息 -->
            <div class="news-header">
              <h1 class="news-title">{{ newsData.title }}</h1>
              <div class="news-meta">
                <div class="meta-left">
                  <span class="news-category">{{ getCategoryName(newsData.category) }}</span>
                  <span class="news-date">
                    <i class="el-icon-time"></i>
                    {{ formatDate(newsData.date) }}
                  </span>
                  
                </div>
                
              </div>
              <div class="news-tags">
                <el-tag 
                  v-for="tag in newsData.tags" 
                  :key="tag" 
                  size="small" 
                  type="info"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </div>

            <!-- 新闻主图 -->
            <div class="news-main-image" v-if="newsData.image">
              <img 
                :src="newsData.image" 
                :alt="newsData.title"
                @error="handleImageError"
              >
            </div>

            <!-- 新闻摘要 -->
            <div class="news-summary" v-if="newsData.summary">
              <p class="summary-text">{{ newsData.summary }}</p>
            </div>

            <!-- 新闻正文 -->
            <div class="news-content">
              <div class="content-text" v-html="formatContent(newsData.content)"></div>
            </div>

                         <!-- 相关图片 -->
             <div class="news-gallery" v-if="newsData.gallery && newsData.gallery.length > 0">
               <div class="gallery-grid">
                 <div 
                   class="gallery-item" 
                   v-for="(image, index) in newsData.gallery" 
                   :key="index"
                 >
                   <img 
                     :src="image.url" 
                     :alt="image.caption || '相关图片'"
                     @error="handleImageError"
                   >
                 </div>
               </div>
             </div>

            
          </div>


        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'NewsDetail',
  data() {
    return {
      newsData: {},
      

      // 模拟新闻数据
      allNews: [
        {
          id: 1,
          title: '海康威视成为杭州2022年亚运会官方赞助商',
          summary: '助力打造智能亚运，为亚运会提供智能化技术支持和服务，展现中国科技实力',
          content: `
            <p>海康威视作为杭州2022年第19届亚运会、第4届亚残运会官方智能物联及大数据服务赞助商，将为亚运会提供全方位的智能化技术支持和服务。</p>
            
            <p>此次合作标志着海康威视在体育赛事智能化服务领域的重要突破，公司将运用先进的AI技术、物联网技术和大数据分析能力，为亚运会提供：</p>
            
            <ul>
              <li>智能安防监控系统</li>
              <li>场馆智能化管理平台</li>
              <li>观众服务数字化解决方案</li>
              <li>赛事数据分析与展示</li>
            </ul>
            
            <p>海康威视董事长陈宗年表示："能够成为杭州亚运会的官方赞助商，我们深感荣幸。这不仅是对海康威视技术实力的认可，更是我们服务国家重大赛事、展现中国科技实力的重要机会。"</p>
            
            <p>杭州亚组委相关负责人表示："海康威视在智能物联和大数据领域的技术优势，将为亚运会提供强有力的技术支撑，助力打造一届'智能、绿色、节俭、文明'的亚运盛会。"</p>
            
            <p>此次合作将推动海康威视在体育赛事智能化服务领域的技术创新，同时为杭州亚运会的成功举办贡献科技力量。</p>
          `,
          category: 'company',
          date: '2022-01-18',
          image: 'https://picsum.photos/800/400?random=17',
          gallery: [
            {
              url: 'https://picsum.photos/600/400?random=18',
              caption: '亚运会开幕式现场'
            },
            {
              url: 'https://picsum.photos/600/400?random=19',
              caption: '智能监控系统展示'
            },
            {
              url: 'https://picsum.photos/600/400?random=20',
              caption: '技术团队合影'
            }
          ],
          
          tags: ['亚运会', '赞助商', '智能化']
        },
        {
          id: 2,
          title: '海康威视牵头启动城市生命线物联技术课题',
          summary: '助推城市生命线建设升级，为城市安全提供技术保障，推动智慧城市建设',
          content: `
            <p>来自清华大学、中国城市燃气协会、中国信息通信研究院等单位的权威专家，对海康威视在全国城市生命线安全工程建设中所做的努力给予充分肯定。</p>
            
            <p>城市生命线工程是城市基础设施的重要组成部分，包括供水、供电、供气、供热、通信、交通等系统。海康威视作为牵头单位，将联合多家科研院所和企业，共同开展以下研究：</p>
            
            <h3>主要研究方向</h3>
            <ol>
              <li>城市生命线物联网感知技术</li>
              <li>多源数据融合与智能分析</li>
              <li>安全风险预警与应急响应</li>
              <li>智慧化运维管理平台</li>
            </ol>
            
            <p>该课题的启动将推动城市生命线工程向数字化、智能化、网络化方向发展，提升城市安全运行水平，为智慧城市建设提供重要支撑。</p>
          `,
          category: 'tech',
          date: '2025-08-12',
          image: 'https://picsum.photos/800/400?random=21',
          gallery: [
            {
              url: 'https://picsum.photos/600/400?random=22',
              caption: '课题启动会现场'
            },
            {
              url: 'https://picsum.photos/600/400?random=23',
              caption: '专家讨论交流'
            }
          ],
          
          tags: ['城市生命线', '物联网', '智慧城市']
        }
      ]
    }
  },
  computed: {
    newsId() {
      return parseInt(this.$route.params.id)
    }
  },
  watch: {
    '$route'(to, from) {
      if (to.params.id !== from.params.id) {
        this.loadNewsData()
      }
    }
  },
  mounted() {
    this.loadNewsData()
  },
  methods: {
    loadNewsData() {
      // 根据路由参数加载新闻数据
      const news = this.allNews.find(item => item.id === this.newsId)
      if (news) {
        this.newsData = { ...news }
        
      } else {
        this.$message.error('新闻不存在')
        this.$router.push('/news')
      }
    },

    
    getCategoryName(category) {
      const categoryMap = {
        company: '公司新闻',
        tech: '技术资讯',
        industry: '行业动态',
        event: '活动公告',
        product: '产品发布'
      }
      return categoryMap[category] || '其他'
    },
    
    formatDate(date) {
      return new Date(date).toLocaleDateString('zh-CN')
    },
    
    formatContent(content) {
      // 格式化新闻内容，支持HTML标签
      return content || ''
    },


    
    handleImageError(e) {
      e.target.style.display = 'none'
    }
  }
}
</script>

<style lang="scss" scoped>
.news-detail-page {
  .breadcrumb-section {
    background: #f8f9fa;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
    
    .el-breadcrumb {
      font-size: 14px;
    }
  }
  
  .news-detail-content {
    padding: 40px 0;
    
         .news-detail-layout {
       display: block;
       max-width: 800px;
       margin: 0 auto;
     }
    
    .news-detail-main {
      .news-header {
        margin-bottom: 30px;
        
        .news-title {
          font-size: 32px;
          font-weight: 700;
          color: #2c3e50;
          line-height: 1.3;
          margin-bottom: 20px;
          
          @media (max-width: 768px) {
            font-size: 24px;
          }
        }
        
        .news-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          
          .meta-left {
            display: flex;
            align-items: center;
            gap: 20px;
            
            .news-category {
              background: #409eff;
              color: white;
              padding: 4px 12px;
              border-radius: 20px;
              font-size: 12px;
            }
            
            .news-date,
            .news-views {
              color: #666;
              font-size: 14px;
              
              i {
                margin-right: 5px;
              }
            }
          }
        }
        
        .news-tags {
          display: flex;
          gap: 10px;
          flex-wrap: wrap;
        }
      }
      
      .news-main-image {
        margin-bottom: 30px;
        
        img {
          width: 100%;
          height: auto;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }
      
      .news-summary {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 30px;
        border-left: 4px solid #409eff;
        
        .summary-text {
          font-size: 16px;
          color: #666;
          line-height: 1.6;
          margin: 0;
          font-style: italic;
        }
      }
      
      .news-content {
        margin-bottom: 40px;
        
        .content-text {
          font-size: 16px;
          line-height: 1.8;
          color: #2c3e50;
          
          h3 {
            color: #409eff;
            margin: 25px 0 15px 0;
          }
          
          ul, ol {
            margin: 15px 0;
            padding-left: 20px;
            
            li {
              margin-bottom: 8px;
            }
          }
          
          p {
            margin-bottom: 15px;
          }
        }
      }
      
             .news-gallery {
         margin-bottom: 40px;
         
                   .gallery-grid {
            display: flex;
            flex-direction: column;
            gap: 30px;
            
            .gallery-item {
              border-radius: 8px;
              overflow: hidden;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
              
              img {
                width: 100%;
                height: 400px;
                object-fit: cover;
                display: block;
              }
            }
          }
       }
      
      .news-footer {
        border-top: 1px solid #e9ecef;
        padding-top: 20px;
        
        .news-actions {
          display: flex;
          gap: 20px;
          
          .el-button {
            &.liked {
              color: #409eff;
            }
            
            &.collected {
              color: #f39c12;
            }
            
            .like-count {
              margin-left: 5px;
            }
          }
        }
      }
    }
    
    
  }
}



// 响应式设计
@media (max-width: 768px) {
  .news-detail-page {
    .news-detail-content {
      padding: 20px 0;
      
      .news-detail-layout {
        gap: 20px;
      }
      
      .news-detail-main {
        .news-header {
          .news-title {
            font-size: 20px;
          }
          
          .news-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
          }
        }
        
                 .news-gallery {
           .gallery-grid {
             gap: 20px;
             
             .gallery-item img {
               height: 300px;
             }
           }
         }
      }
    }
  }
}
</style>
